<template>
  <div class="news-wrap">
    <SearchBox
      :fields="search.fields"
      :data="search.data"
      @reset="onReset"
      @submit="doSelect">
      <template #datetime>
        <el-date-picker
          v-model="search.data.datetime"
          type="datetimerange"
          time-format="HH:mm"
          value-format="YYYY-MM-DD HH:mm"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </template>
    </SearchBox>
    <TableBox
      ref="table"
      :cols="table.cols"
      :xhr="queryData">
      <template #actions="{ row, index }">
        <PromiseBtn
          link
          size="small"
          type="primary"
          @click.stop="doDel(row.id)">
          删除
        </PromiseBtn>
      </template>
    </TableBox>
  </div>
</template>
<script>
import httpService from '@/utils/httpService';
import { messageManageAPI } from '@/config/api';

import { ElMessage } from 'element-plus';
import moment from 'moment';

export default {
  name: 'messageList',
  components: {},
  mixins: [],
  data() {
    return {
      search: {
        data: {
          content: '',
          datetime: '',
        },
        fields: [
          {
            name: 'content',
            label: '消息内容',
          },
          {
            name: 'datetime',
            label: '发送时间段',
          },
        ],
      },
      table: {
        cols: [
          {
            key: 'content',
            label: '消息内容',
            minWidth: 300,
          },
          {
            key: 'createTime',
            label: '发送时间',
            width: 300,
          },
        ],
      },
      opts: {},
    };
  },
  methods: {
    onReset() {
      this.search.data = {
        content: '',
        datetime: '',
      };
    },
    doSelect() {
      this.$refs.table.reload();
    },
    async doDel(ids) {
      if (!id) return;
      ElMessageBox.confirm('请确认是否执行该操作吗', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const { code, data, message } = await httpService.get(messageManageAPI.remove, {
          id: id,
        });
        if (code == 200) {
          ElMessage({
            message,
            type: 'success',
          });
          this.doSelect();
        } else {
          ElMessage.error(message || '系统异常，请稍后重试');
        }
      });
    },
    // 列表
    async queryData({ current, size }) {
      try {
        let list = [],
          totalCount = 0;
        console.log('this.search.data.datetime', this.search.data.datetime);
        const { code, data, message } = await httpService.get(messageManageAPI.getList, {
          pageNo: current,
          pageSize: size,
          content: this.search.data.content || '',
          startDate: this.search.data.datetime ? this.search.data.datetime[0] : '',
          endDate: this.search.data.datetime ? this.search.data.datetime[1] : '',
        });
        if (code == '200') {
          data.records.map(
            i => (i.createTime = moment(i.createTime).format('YYYY-MM-DD HH:mm:ss')),
          );
          list = data.records;
          totalCount = data.total;
        } else {
          ElMessage.error(message || '系统异常，请稍后重试');
        }
        return { data: list, totalCount };
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
